import TestApplication from "./TestApplication";
import RenderStateStack from "../../src/render/RenderStateStack";
import ELayout from "../../src/enums/ELayout";
import Rectangle from "../../src/geom/Rectangle";
// import img from "./data/test.jpg";

export default function main(): void {
    const cvs: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
    let app: TestApplication = new TestApplication(cvs);
    let ctx: CanvasRenderingContext2D = cvs.getContext('2d') as CanvasRenderingContext2D;
    // app.start();

    // app.fillLinearRect(10, 10, 100, 100);
    // app.fillRadialRect(10, 10, 100, 200);
    // app.fillPatternRect(10, 10, 500, 500, 'repeat-x');
    // app.fillCircle(100, 100, 50);
    // app.strokeLine(100, 100, 200, 100);
    // app.strokeCoord(0, 0, cvs.width, cvs.height);
    app.strokeGrid();
    // app.printTextStates();
    // app.testCanvas2DTextLayout();
    // app.loadAndDrawImage('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1586875857&di=5f8481a996b18b03b1c81cc7de835e33&src=http://bbs.jooyoo.net/attachment/Mon_0905/24_65548_2835f8eaa933ff6.jpg');
    // app.loadAndDrawImage(img);
    // console.log(img);
    app.drawColorCanvas();


    // testMyRenderStateStack();
    // testMyTextLayout(ctx, app);
    testChangePartCanvasImageData(app, ctx);
    // printShadowStates(ctx);
}

/**
 * 测试渲染状态
 */
function testMyRenderStateStack(): void {
    // 创建一个渲染状态堆栈，此时会有一个栈顶并有一个默认渲染状态
    let statck: RenderStateStack = new RenderStateStack();
    // 1.打印出默认的全局状态
    statck.printCurrentStateInfo();
    // 2.克隆栈顶元素，并且将克隆的状态压栈变成当前状态
    statck.save();
    // 3.修改当前状态（栈顶元素）的值
    statck.lineWidth = 10;
    statck.fillStyle = 'black';
    // 4.此时打印出当前的状态值
    statck.printCurrentStateInfo();
    // 5.丢弃当前状态
    statck.restore();
    // 6.再次打印，应该是和第1步一致
    statck.printCurrentStateInfo();
}

function testMyTextLayout(ctx: CanvasRenderingContext2D, app: TestApplication): void {
    let font: string = app.makeFontString("10px", "normal", "normal", "normal", 'sans-serif');

    let x: number = 20;
    let y: number = 20;
    let width: number = ctx.canvas.width - x * 2;
    let height: number = ctx.canvas.height - y * 2;
    let right: number = x + width;
    let bottom: number = y + height;

    let drawX: number = x;
    let drawY: number = y;
    let drawWidth: number = 150;
    let drawHeight: number = 50;

    if (ctx !== null) {

        ctx.save();
        ctx.font = font;
        app.fillRectWithTitle(x, y, width, height);
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'left-top', ELayout.LEFT_TOP, 'rgba( 255 , 255 , 0 , 0.2 )');
        drawX = right - drawWidth;
        drawY = y;
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'right-top', ELayout.RIGHT_TOP, 'rgba( 255 , 255 , 0 , 0.2 )');
        drawX = right - drawWidth;
        drawY = bottom - drawHeight;
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'right-bottom', ELayout.RIGHT_BOTTOM, 'rgba( 255 , 255 , 0 , 0.2 )');
        drawX = x;
        drawY = bottom - drawHeight;
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'left-bottom', ELayout.LEFT_BOTTOM, 'rgba( 255 , 255 , 0 , 0.2 )');
        drawX = (right - drawWidth) * 0.5;
        drawY = (bottom - drawHeight) * 0.5;
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'center-middle', ELayout.CENTER_MIDDLE, 'rgba( 255 , 0 , 0 , 0.2 )');
        drawX = (right - drawWidth) * 0.5;
        drawY = y;
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'center-top', ELayout.CENTER_TOP, 'rgba( 0 , 255 , 0 , 0.2 )');
        drawX = (right - drawWidth);
        drawY = (bottom - drawHeight) * 0.5;
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'right-middle', ELayout.RIGHT_MIDDLE, 'rgba( 0 , 255 , 0 , 0.2 )');
        drawX = (right - drawWidth) * 0.5;
        drawY = (bottom - drawHeight);
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'center-bottom', ELayout.CENTER_BOTTOM, 'rgba( 0 , 255 , 0 , 0.2 )');
        drawX = x;
        drawY = (bottom - drawHeight) * 0.5;
        app.fillRectWithTitle(drawX, drawY, drawWidth, drawHeight, 'left-middle', ELayout.LEFT_MIDDLE, 'rgba( 0 , 255 , 0 , 0.2 )');
    }
}

function testChangePartCanvasImageData(app: TestApplication, ctx: CanvasRenderingContext2D, rRow: number = 2, rColum: number = 0, cRow: number = 1, cColum: number = 0, size: number = 32): void {
    let colorCanvas: HTMLCanvasElement = app.getColorCanvas(size);
    let context: CanvasRenderingContext2D | null = colorCanvas.getContext("2d");

    if (context === null) {
        alert("Canvas获取渲染上下文失败！");
        throw new Error("Canvas获取渲染上下文失败！");
    }
    app.setShadowState();
    app.drawImage(colorCanvas,
        Rectangle.create(300, 100, colorCanvas.width, colorCanvas.height));

    let imgData: ImageData = context.createImageData(size, size);

    let data: Uint8ClampedArray = imgData.data;
    let rbgaCount: number = data.length / 4;

    for (let i = 0; i < rbgaCount; i++) {
        data[i * 4 + 0] = 255;
        data[i * 4 + 1] = 0;
        data[i * 4 + 2] = 0;
        data[i * 4 + 3] = 255;
    }

    context.putImageData(imgData, size * rColum, size * rRow, 0, 0, size, size);
    imgData = context.getImageData(size * cColum, size * cRow, size, size);
    data = imgData.data;
    let component: number = 0;
    for (let i: number = 0; i < imgData.width; i++) {
        for (let j: number = 0; j < imgData.height; j++) {
            for (let k: number = 0; k < 4; k++) {
                let idx: number = (i * imgData.height + j) * 4 + k;
                component = data[idx];
                if (idx % 4 !== 3) {
                    data[idx] = 255 - component;
                }
            }
        }
    }
    context.putImageData(imgData, size * cColum, size * cRow, 0, 0, size, size);
    app.drawImage(colorCanvas, Rectangle.create(300, 100, colorCanvas.width, colorCanvas.height));
    setShadowState(ctx);
}

function printShadowStates(ctx: CanvasRenderingContext2D): void {
    if (ctx !== null) {
        console.log("*********ShadowState**********");
        console.log(" shadowBlur : " + ctx.shadowBlur);
        console.log(" shadowColor : " + ctx.shadowColor);
        console.log(" shadowOffsetX : " + ctx.shadowOffsetX);
        console.log(" shadowOffsetY : " + ctx.shadowOffsetY);
    }
}

function setShadowState(ctx: CanvasRenderingContext2D, shadowBlur: number = 5, shadowColor: string = "rgba( 127 , 127 , 127 , 0.5 )", shadowOffsetX: number = 10, shadowOffsetY: number = 10): void {
    if (ctx !== null) {
        ctx.shadowBlur = shadowBlur;
        ctx.shadowColor = shadowColor;
        ctx.shadowOffsetX = shadowOffsetX;
        ctx.shadowOffsetY = shadowOffsetY;
    }
}